<template>
  <canvas class="mycanvas" :ref="'canvas' + id" :width="width" :height="height"></canvas>
</template>

<script>
export default {
  name: 'canvas',
  props: {
  },
  data(){
    return {
      id:new Date().getTime(),//使用时间戳作为每个上传控件的唯一标准
      width:500,
      height:500
    }
  },
  methods:{
    darw(){

    }
  },
  mounted(){
    //获取canvas元素
    var canvas = this.$refs['canvas' + this.id]
    //获取画布对象
    var ctx = canvas.getContext('2d')

    //画矩形
    //ctx.fillRect(20,20,150,100)
    //创建矩形区域
    ctx.rect(20,20,150,100)
    //设置描边颜色
    ctx.strokeStyle = '#ff0000'
    //设置填充颜色
    ctx.fillStyle = '#000000'
    //描边
    ctx.stroke()
    //填充
    ctx.fill()

    //创建圆
    ctx.beginPath()
    //圆路径
    ctx.arc(400, 400, 50, 0, 1 * Math.PI)
    //画圆形
    ctx.stroke()
    ctx.fill()

    //画不规则图形
    ctx.beginPath()
    ctx.strokeStyle = '#351ad7'
    //下笔
    ctx.moveTo(0,0)
    //移动
    ctx.lineTo(300,150)
    //移动
    ctx.lineTo(100,250)
    //移动
    ctx.lineTo(50,200)
    //关闭路径
    ctx.closePath()
    
    ctx.stroke()

    //文字
    ctx.fillStyle = "#ff0000"//颜色
    ctx.font="40px Arial"//大小样式
    var text = 'Hello World'
    ctx.fillText(text,0,40)//文字内容
    //检测文本宽高
    console.log(ctx.measureText(text))
    
    //绘制图形
    var img = new Image()
    //监听图片加载完成
    img.onload = () => {
      console.log(img,img.width,img.height)
      //绘制图片
      ctx.drawImage(img,0,0,100,100)

      //获取坐标点图形数据
      var imgData = ctx.getImageData(100,100,2,2)
      console.log(imgData)
    }
    //设置图片路径
    img.src = require('@/assets/logo.png')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mycanvas{
    margin: 0 auto;
    background: #f1f1f1;
  }
</style>